<template>
    <div id="video-button">
        <el-row>
            <el-col :span="12" style="text-align: left">
                <span class="video-bar-item" @click="play"><i class="iconfont" :class="[paused ? 'icon-play' : 'icon-zanting']"></i></span>
                <span class="video-bar-item" v-show="hasNext" @click="next"><i class="iconfont icon-xiayishou"></i></span>
                <span class="video-bar-item">{{dataUtil.formatTime(currentTime)}} / {{dataUtil.formatTime(duration)}}</span>
            </el-col>
            <el-col :span="8" style="text-align: center">
                <!--<span class="video-bar-item"><i class="iconfont icon-yinliang"></i></span>-->
            </el-col>
            <el-col :span="12" style="text-align: right">
                <span class="video-bar-item"><i class="iconfont icon-yinliang"></i></span>
                <span class="video-bar-item"><i class="iconfont icon-weibiaoti103"></i></span>
                <span class="video-bar-item"><i class="iconfont icon-fangda"></i></span>
                <span class="video-bar-item"><i class="iconfont icon-quanping"></i></span>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    'use strict';

    import {baseUtil} from "../../common/js/BaseUtil";

    export default {
        name: "v-button",
        props: {
            paused: {
                type: Boolean,
                default() {
                    return true;
                },
                desc: '是否暂停'
            },
            hasNext: {
                type: Boolean,
                default() {
                    return false;
                },
                desc: '是否存在下一个视频'
            },
            currentTime: {
                type: Number,
                default: () => {
                    return 10;
                },
                desc: '当前的播放时间'
            },
            duration: {
                type: Number,
                default: () => {
                    return 100;
                },
                desc: '总时长'
            },
        },
        data() {
            return {
                baseUtil: baseUtil,
                dataUtil: baseUtil.getDateUtil(),

                iconArray: ['icon-play','icon-zanting'],
            }
        },
        computed: {},
        methods: {
            play() {
                this.$emit('play', {});
            },
            next() {
                this.$emit('next', {});
            }
        },
        created() {
        },
        mounted() {
        }
    }
</script>

<style lang="scss" scoped>

    @import '../../common/css/theme.sass';

    // 进度条宽度
    $barWidth: 98% 100%;
    // 进度条高度
    $barHeight: 2px 4px;
    // 0.1s的匀速动画
    $linearAnimation: linear 0.1s;

    *{
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently not supported by any browser */
    }

    #video-button {
        width: 100%;
        height: 45px;
        /*background-color: black;*/
        color: white;

        span.video-bar-item {
            margin: 0;
            padding: 2px 15px;
            height: 100%;
            line-height: 45px;
            cursor: pointer;

            & > i {
                font-size: 24px;
            }

            &:hover {
                color: $themeColor;
            }
        }

    }


</style>
